<template>
    <el-dialog v-model="show" title="添加时间段" @close="emit('hide')">
        <el-form ref="formRef" :model="form">
            <el-form-item prop="username" label="秒杀时间段名称：" label-width="200px">
                <el-input v-model="form.name" autocomplete="off" style="width:180px" />
            </el-form-item>
            <el-form-item prop="nickName" label="每日开始时间：" label-width="200px">
                <el-time-picker style="width:180px" v-model="form.startTime" placeholder="请选择时间点"></el-time-picker>
            </el-form-item>
            <el-form-item prop="email" label="每日结束时间：" label-width="200px">
                <el-time-picker style="width:180px" v-model="form.endTime" placeholder="请选择时间点"></el-time-picker>
            </el-form-item>
            <el-form-item label="上线/下线" label-width="100px">
                <el-radio-group v-model="form.status" class="ml-4">
                    <el-radio :label="1" size="large">上线</el-radio>
                    <el-radio :label="0" size="large">下线</el-radio>
                </el-radio-group>
            </el-form-item>
        </el-form>
        <template #footer>
            <span class="dialog-footer">
                <el-button @click="emit('hide')">取消</el-button>
                <el-button type="primary" @click="sureFn"> 确定 </el-button>
            </span>
        </template>
    </el-dialog>
</template>
  
<script setup lang="ts">
import { ElMessage, ElMessageBox, formEmits, FormInstance } from "element-plus";
import { reactive, ref, watch } from "vue";
import { user } from "@/api";

// 表单内容
const form = reactive<IflashSessionUserParams>({
    name: "",
    endTime: "",
    startTime: "",
    status: 0,
    id:null,
    createTime:null
});


const emit = defineEmits(["hide", "refresh"]);
// const show = ref(true);
const props = defineProps({
    show: {
        type: Boolean,
        default: false,
    },
    data: {
        type: Number,
        default: 0,
    },
});

const formRef = ref<FormInstance>();

const sureFn = () => {
    formRef.value?.validate((valid: boolean) => {
        if (valid) {
            ElMessageBox.confirm("是否要确认？", "确定添加", {
                type: "warning",
                confirmButtonText: "确定",
                cancelButtonText: "取消",
            }).then(() => {
                if (props.data !== 0) {
                    user.flashSessiondateApi(form).then((res) => {
                        if (res.code === 200) {
                            // 提示用户
                            ElMessage.success("修改时间段成功");
                            // 关闭 dialog
                            emit("hide");
                            // 刷新表格
                            emit("refresh");
                        }
                    });
                } else {
                    user.createflashSessionApi(form).then((res) => {
                        if (res.code === 200) {
                            ElMessage.success("添加时间段成功");
                            emit("hide");
                            // 刷新
                            emit("refresh");
                            // 在关闭 dialog 后， 记得清空  -- 自己实现
                        } else {
                            ElMessage.error(res.message + ",请重试");
                        }
                    });
                }
            });
        } else {
            return false;
        }
    });
};

// 什么时候发请求向服务器获取我们要的数据 -
// 当我们点击编辑，会修改从父组件传递进来的一个 data , 其实就是id
// 当该id不为0，就是点的编辑
// watch 来监听 id(props.data), 当不为0 ，才向服务器发请求
watch(
    () => props.data,
    () => {
        if (props.data === 0) {
            formRef.value?.resetFields();
            return;
        } else {
            // 否则就是点击的编辑，就可以向服务器发请求
            const cdc = <IflashSessionUserParams><unknown>props.data
            form.endTime = cdc.endTime
            form.name = cdc.name
            form.startTime = cdc.startTime
            form.status = cdc.status
            form.id = cdc.id
            form.createTime = cdc.createTime
        }
    }
);
</script>
  
<style scoped>

</style>
  